import { ReactNode, HTMLAttributes } from "react";

/**
 * Тип данных заголовков таблицы.
 *
 * @property { string } title - Значение, которое будет использовано в качестве заголовка столбца.
 * @property { string } name - Ключ, который будет связывать заголовки с соответствующими данными в таблице.
 */
export type HeaderColumnType = {
    title: string;
    name: string;
};

/**
 * Тип данных строки таблицы.
 *
 * @property { number | string } id - Обязательное значение, которе будет использовано в качестве key для строки таблицы.
 * @property { function } actions - Позволяет добавить в таблицу различные кнопки для работы с данными строки.
 * @property { boolean } disabled - Отключает строку.
 */
export type RowDataType<TableData = any> = Partial<TableData> & {
    id: number | string;
    actions?: ReactNode;
    disabled?: boolean;
};

/**
 * Интерфейс компонента Table.
 *
 * @property { string } className - Устанавливает пользовательские классы на элементе <table>
 * @property { HeaderColumnType[] } columnList - Массив заголовков таблицы.
 * @property { RowDataType[] } rowList -  Массив с данными.
 * @property { boolean } enableActions - Если true добавит в таблицу колонку с actions.
 * @property { boolean } enableCheckbox - Если true отобразит checkbox для выбора строк таблицы.
 * @property { function } onSelect - Колбек, который передает id одной текущей строки.
 * @property { function } onSelectAll - Колбек, который передает массив с id всех строк таблицы.
 * @property { string[] } selectedRows - Массив id выделенных в данный момент строк.
 * @property { boolean } striped - Если true фон строк таблицы будет чередоваться светлый/темнее.
 */
export interface ITableProps {
    className?: string;
    columnList?: HeaderColumnType[];
    rowList?: RowDataType[];
    enableActions?: boolean;
    enableCheckbox?: boolean;
    onSelect?: (id: string | number) => void;
    onSelectAll?: (ids: (string | number)[]) => void;
    selectedRows?: (string | number)[];
    striped?: boolean;
    rowClick?: (id: string | number) => void;
}

/**
 * Тип для стилизованной таблицы.
 * 
 * @property { CSSObject } tableStyle - Устанавливает пользовательские классы на элементе <table>.
 * @property { HeaderColumnType[] } columnList - Массив заголовков таблицы.
 * @property { RowDataType[] } rowList - Массив с данными.
 * @property { boolean } enableActions - Если true, добавит в таблицу колонку с actions.
 * @property { string[] } selectedRows - Массив id выделенных в данный момент строк.
 * @property { boolean } striped - Если true, фон строк таблицы будет чередоваться светлый/темнее.
 */
export type TStyledTableProps =
    & Omit<ITableProps, 'onSelect' & 'onSelectAll'>
    & HTMLAttributes<HTMLTableElement>
;

/**
 * Тип для элемента <thead> таблицы.
 */
export type TStyledHeadProps = HTMLAttributes<HTMLTableSectionElement>;

/**
 *Тип для элемента <tr> таблицы.
 * 
 * @property { boolean } isDark - Если true, то строка будет иметь темный фон.
 * @property { boolean } isChecked - Если true, то строка будет визуально отмечена как выбранная.
 * @property { boolean } disabled - Отключает строку таблицы.
 */
export type TRProps = HTMLAttributes<HTMLTableRowElement>
    & { isDark?: boolean; isChecked?: boolean; disabled?: boolean };

/**
 * Тип для элемента <th> таблицы.
 */
export type TStyledTHProps = HTMLAttributes<HTMLTableCellElement>;

/**
 * Тип для элемента <tbody> таблицы.
 */
export type TStyledBodyProps = HTMLAttributes<HTMLTableSectionElement>;

/**
 * Тип для элемента <td> таблицы.
 */
export type TStyledDProps = HTMLAttributes<HTMLTableCellElement>;